<script lang="ts">
import { TeleportAntdModalFooter } from '~comp/antd-assist';
import { type SignUpBonusDataType, useSignUpBonusInfo } from '../ts/depositBonusInfoHook';

export const signUpBonusPopup = useAntdModal(
  // eslint-disable-next-line import/no-self-import
  defineAsyncComponent(() => import('./SignUpBonusPoup.vue')),
  {
    title: toRef(() => $t('e1QCiWLxXcGqes7Lj4Hqn')),
    wrapClassName: 'ant-cover__Modal-drawer ant-cover__Modal-rank __screen-drawer',
    centered: true,
    footer: null,
    destroyOnClose: true,
  },
);
</script>

<script lang="ts" setup>
const props = defineProps<{ detailData?: SignUpBonusDataType; onClose?: () => void }>();

const appStore = useAppStore();

const { getSignUpBonusDataRef } = useSignUpBonusInfo(!props.detailData);

const getDetailDataRef = computed(() => {
  const { detailData } = props;
  if (detailData) {
    return detailData;
  }
  return getSignUpBonusDataRef.value;
});
</script>

<template>
  <div class="grid mb-1 gap-3 text-sm">
    <TCard class="!p-3">
      <div class="grid grid-cols-2">
        <p class="text-3.5 text-sys-text-body">
          {{ $t('1a3c5B31SaClVcgfXl0sp') }}
        </p>
        <p class="text-right text-4">
          {{ getDetailDataRef?.depositUsdText || '-' }}
        </p>
        <div class="col-span-2 divider-h-gradual ml-auto mr-auto w-88%" />
      </div>
      <div class="grid grid-cols-2">
        <p class="text-3.5 text-sys-text-body">
          {{ $t('x7AhXNqupfdYug6nmMn9G') }}
        </p>
        <p class="text-right text-4">
          {{ getDetailDataRef?.amountUsdText || '-' }}
        </p>
        <div class="col-span-2 divider-h-gradual ml-auto mr-auto w-88%" />
      </div>
      <div class="grid grid-cols-2 mb-4">
        <p class="text-3.5 text-sys-text-body">
          {{ $t('y2ri0B9cXOg065hQKzC2') }}
        </p>
        <p class="text-right text-4">
          {{ getDetailDataRef?.depositMaxBonusUsdText || '-' }}
        </p>
        <div class="col-span-2 divider-h-gradual mb-0 ml-auto mr-auto w-88%" />
      </div>
      <div class="grid grid-cols-2">
        <p class="text-3.5 text-sys-text-body">
          {{ $t('uIkputJyPtyBCeeSwh2ig') }}
        </p>
        <p class="text-right text-4">
          {{ getDetailDataRef?.currency || '-' }}
        </p>
      </div>
    </TCard>

    <div class="mt-3 text-4.5">
      {{ $t('ml9XVhsQdBdBPhvHwTd') }}
    </div>
    <TCard class="!p-3">
      <div class="grid grid-cols-2">
        <p class="text-3.5 text-sys-text-body">
          {{ $t('an0xB3Kronuhw2ztsiKw3') }}
        </p>
        <p class="text-right text-4">
          {{ getDetailDataRef?.wagerDetail?.bnRate ? `x${getDetailDataRef?.wagerDetail?.bnRate?.toFormat() ?? ''}`.trim() : '-' }}
        </p>
        <div class="col-span-2 divider-h-gradual ml-auto mr-auto w-88%" />
      </div>
      <div class="grid grid-cols-2">
        <p class="text-3.5 text-sys-text-body">
          {{ $t('bby4AfOmqE7SWmH4WF4') }}
        </p>
        <p class="text-right text-4">
          {{ getDetailDataRef?.wagerDetail?.usdMinAmountText || '-' }}
        </p>
        <div class="col-span-2 divider-h-gradual ml-auto mr-auto w-88%" />
      </div>
      <div class="grid grid-cols-2 mb-4">
        <p class="text-3.5 text-sys-text-body">
          {{ $t('5r2MhfT0z6pt0GejindO') }}
        </p>
        <p class="text-right text-4">
          {{ getDetailDataRef?.wagerDetail?.usdMaxAmountText || '-' }}
        </p>
      </div>
      <div class="mt-2 flex gap-2 rounded-2 bg-sys-layer-c p-3 text-sys-text-body">
        <i class="i-local:warn" />
        <I18nT keypath="yNnX6kTJv4XcBDtMzoh" tag="p">
          <template #name>
            {{ appStore.appName }}
          </template>
        </I18nT>
      </div>
    </TCard>

    <TeleportAntdModalFooter footerClass="!max-w-none">
      <AButton
        class="ant-cover__Button-3d-gray w-full flex-1"
        type="primary"
        @click="onClose"
      >
        {{ $t('pFexkGv2pL4Nl4GmT9ZZm') }}
      </AButton>
    </TeleportAntdModalFooter>
  </div>
</template>
